<template>
    <view class="my-settle-container">
        <!-- 全选 -->
        <label class="radio" @click="radioChange">
            <radio :checked="allCheckedState" color="#c00000"></radio><text>全选</text>
        </label>
        <!-- 合计 -->
        <view class="ammont-box">
            合计:<text class="ammont">￥{{checkedAmmont.toFixed(2)}}</text>
        </view>
        <!-- 结算按钮 -->
        <view class="btnSettle" @click="payMoney">
            结算（{{checkedCount}}）
        </view>
    </view>
</template>

<script>
    import {
        mapGetters,
        mapMutations,
        mapState
    } from 'vuex'
    export default {
        name: "my-settle",
        data() {
            return {
                seconds: 3,
                timer: null
            };
        },
        computed: {
            ...mapGetters('m_cart', ['checkedCount', 'checkedAmmont', 'allCheckedState']), //选中商品总数 选中商品总价 全选框选中状态
            ...mapGetters('m_user', ['addstr']),
            ...mapState('m_user', ['token']),
            ...mapState('m_cart', ['cart'])
        },
        methods: {
            ...mapMutations('m_cart', ['checkedAll']),
            ...mapMutations('m_user', ['updateRedirectInfo']),
            // 全选按钮点击事件
            radioChange(e) {
                // console.log(this.allCheckedState);
                // 全选框选中状态也是根据每一个商品的选中状态计算出来的 有一个未选中 全选状态就是未选中
                // 拿到当前全选框的选中状态 取反后传给vuex 现在是全选true 就取反传false 让所有商品选中状态都变为false
                // 现在是未全选false 就取反后传true 让所有都选中
                this.checkedAll(!this.allCheckedState)
            },
            // 结算按钮点击事件
            async payMoney() {
                if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品')
                if (!this.addstr) return uni.$showMsg('请选择收货地址')
                // if (!this.token) return uni.$showMsg('请先登录')
                if (!this.token) {
                    this.delayNavigate()
                    return
                }
                // 以上三个判断都通过了 就可以创建订单了
                // 1. 创建订单
                // 1.1 组织后端需要的订单的信息对象
                const orderInfo = {
                    // 订单总价格
                    // order_price: this.checkedAmmont,
                    order_price: 0.01,
                    // 收货地址
                    consignee_addr: this.addstr,
                    // 订单内商品信息数组
                    goods: this.cart.filter(x => x.goods_state).map(x => ({
                        goods_id: x.goods_id,
                        goods_number: x.goods_count,
                        goods_price: x.goods_price
                    }))
                }
                // 1.2 发起请求创建订单 
                const {
                    data: res
                } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
                // console.log(res);
                if (res.meta.status !== 200) return uni.$showMsg('订单创建失败！')
                // 1.3 拿到订单编号保存
                const orderNumber = res.message.order_number
                // console.log(orderNumber);
                // 2.订单预支付
                // 2.1 发请求 把上一步得到的订单编号发送给服务器 获取订单的支付信息
                const {
                    data: res2
                } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
                    order_number: orderNumber
                })
                console.log(res2);
                // 2.2 假设预订单创建失败
                if (res2.meta.status !== 200) return uni.$showMsg('预付订单创建失败！')
                // 2.3 拿到订单支付相关的必要参数
                const payInfo = res2.message.pay
                // 3. 发起微信支付
                // 3.1 调用官方api 发起支付 把必要参数传进去
                const [err, succ] = await uni.requestPayment(payInfo)
                // 3.2 发生错误 提示未支付
                if (err) return uni.$showMsg('订单未支付！')
                // 3.3 没有出错 进一步查询支付状态
                const {
                    data: res3
                } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', {
                    order_number: orderNumber
                })
                // 3.4 根据返回状态码判断是否支付
                if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
                // 3.5检测到订单支付完成
                uni.showToast({
                    title: '订单支付完成！',
                    icon: 'success'
                })
            },
            // 展示倒计时效果
            showTips(n) {
                uni.showToast({
                    icon: 'none',
                    mask: true,
                    title: `请先登录再结算，${n}秒后自动跳往登录页`,
                    duration: 1500
                })
            },
            // 延时导航到我的页面方法
            delayNavigate() {
                // 展示提示
                this.showTips(this.seconds)
                this.timer = setInterval(() => {
                    // 每隔一秒再展示提示
                    this.seconds--
                    if (this.seconds <= 0) {
                        clearInterval(this.timer)
                        // 去往登录页
                        uni.switchTab({
                            url: '/pages/my/my',
                            success: () => {
                                // 保存页面信息 从哪个页面跳走的 跳转方式
                                this.updateRedirectInfo({
                                    openType: 'switchTab',
                                    from: '/pages/cart/cart'
                                })
                            }
                        })

                        // 重置倒计时的数字
                        this.seconds = 3
                        return
                    }
                    this.showTips(this.seconds)

                }, 1000)
            }

        },


    }
</script>

<style lang="scss">
    .my-settle-container {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 50px;
        width: 100%;
        background-color: #fff;
        font-size: 14px;
        padding-left: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 99;

        .radio {
            display: flex;
            align-items: center;
        }

        .ammont {
            color: #c00000;
            font-weight: bold;
        }

        .btnSettle {
            width: 100px;
            background-color: #c00000;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: #fff;
        }
    }
</style>
